<template>
  <div
    class="fixed top-0 z-10 left-0 right-0 animate__animated animate__fadeInDown h-[80px]"
  >
    <div class="relative h-[70px] w-full">
      <img src="/static/header.png" class="w-full h-full select-none" />
      <img
        src="/static/guang.png"
        class="w-[20%] relative left-[50%] top-[-50%]"
        style="transform: translateX(-50%)"
      />
      <div
        class="absolute text-[#fff] left-[50%] top-[50%] text-[34px]"
        style="
          transform: translateX(-50%) translateY(-50%);
          letter-spacing: 3px;
        "
      >
        商都县长盛工业园区指挥中心
      </div>
      <div
        class="absolute top-0 left-0 right-0 bottom-0 flex justify-between items-end px-[20px] z-[10]"
      >
        <div class="flex justify-end items-center gap-x-[30px] leading-[70px]">
          <div class="text-white text-[20px]" style="font-family: PMZD">
            {{ currentTime }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onUnmounted } from "vue";
import { dayjs } from "element-plus";
const emits = defineEmits(["navChange"]);
dayjs.locale("zh-cn");
const props = defineProps({
  navIndex: {
    type: Number,
    default: 0,
  },
});

const currentTime = ref(dayjs().format("YYYY年MM月DD日 HH:mm:ss dddd"));
const timer = setInterval(() => {
  currentTime.value = dayjs().format("YYYY/MM/DD dddd HH:mm:ss");
}, 1000);

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped lang="less"></style>
